<template>
	<view class="container">
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<view class="input-content">
				<view class="input-item">
					<input type="number" placeholder-class="input-placeholder" :value="mobile" placeholder="请输入手机号码" maxlength="11" data-key="mobile" class="mobild-input" @input="inputChange" />
					<button class="auth-code-btn" :class="mobile.length>0?'active':''" tabindex="-1" :disabled="state.smsSendBtn" @click.stop.prevent="getCaptcha">
						{{ (!state.smsSendBtn && '获取验证码') || state.time + ' s' }}
					</button>
				</view>
				<view class="input-item">
					<input
						type="number"
						:value="password"
						placeholder="请输入验证码"
						placeholder-class="input-placeholder"
						maxlength="6"
						data-key="password"
						@input="inputChange"
						@confirm="toLogin"
					/>
				</view>
			</view>
			<button class="confirm-btn" :class="password.length>0?'active':''" @click="toLogin" :disabled="logining">登录</button>
		</view>
		<view class="register-section">
			登录代表您同意
			<text @click="toRegist">企惠用户协议、隐私策略</text>
		</view>
		<uni-popup ref="image" type="center" :custom="true" >
			<view class="uni-image">
				<image class="image" :src="popImage" mode="" style="width: 80rpx;height: 80rpx;"/>
				<view class="font34 colorfont">
					{{showToastTips}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
import uniPopup from '@/components/uni-popup/uni-popup.vue'

export default {
	components: {
		uniPopup
	},
	data() {
		return {
			mobile: '',
			password: '',
			smsSendBtn: false,
			state: {
				time: 60,
				loginBtn: false,
				// login type: 0 email, 1 username, 2 telephone
				loginType: 0,
				smsSendBtn: false
			},
			logining: false,
			showToastTips:'',
			popImage:''
		};
	},
	onLoad() {},
	methods: {
		...mapMutations(['login']),
		inputChange(e) {
			const key = e.currentTarget.dataset.key;
			if(key=='password'&&e.detail.value==''){
				this.logining=false
			}
			this[key] = e.detail.value;
		},
		getCaptcha(e) {
			e.preventDefault();
			const { state, mobile,$requestApi } = this;
			if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(mobile)){
				this.$api.msg('请输入正确的手机号');
				return;
			}
			state.smsSendBtn = true;
			const interval = setInterval(() => {
				if (state.time-- <= 0) {
					state.time = 60;
					state.smsSendBtn = false;
					clearInterval(interval);
				}
			}, 1000);
			this.$http
				.request({
					method: 'POST', // 请求方法必须大写
					url:$requestApi.sendCode,
					data: {
						mobile: mobile,
					}
				})
				.then(result => {
					console.log(result);
				})
				.catch(err => {
					clearInterval(interval);
					state.time = 60;
					state.smsSendBtn = false;
				});
		},
		async toLogin() {
			this.logining = true;
			const { mobile, password, login,$requestApi } = this;
			if(!mobile){
				this.popImage = '/static/useCenter/error.png';
				this.$refs['image'].open();
				this.showToastTips='请输入手机号'
			}
			this.$http
				.request({
					method: 'POST', // 请求方法必须大写
					url: $requestApi.registerAndLogin,
					data: {
						mobile: mobile,
						smscode: password,
						type:1
					}
				})
				.then(result => {
					let _data = result.data;
					if (_data.code === 200) {
						uni.setStorageSync('token', _data.result.token);
						login({ ..._data.result });
						this.$Router.back(1);;
					}else if(_data.code===1002){
						this.popImage = '/static/useCenter/error.png';
						this.$refs['image'].open();
						this.showToastTips='验证码错误'
					}
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #fff;
}
.container {
	padding-top: 115px;
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: #fff;
}
.wrapper {
	position: relative;
	z-index: 90;
	background: #fff;
	padding-bottom: 40upx;
}

.input-content {
	padding: 0 60upx;
}
.input-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0 30upx;
	height: 100upx;
	border-radius: 4px;	
	margin-bottom: 50upx;	
	position: relative;
	border-bottom:1px solid rgba(209,209,214,1);
	.input-placeholder{
		color: #D1D1D6;
	}	
	&:last-child {
		margin-bottom: 0;
	}
	
	input {
		height: 60upx;
		font-size: 34upx;
		color: #0B0E11;
		width: 100%;
		
	}
	input.mobild-input {
		width: calc(100% - 200upx);
	}
}
.auth-code-btn {
	width: 190upx;
	height: 60upx;
	line-height: 60upx;
	border-radius: 8upx;
	
	background:rgba(209,209,214,1);
	color: #fff;
	font-size: 28upx;
	position: absolute;
	top: 20upx;
	right: 15upx;
	padding-left: 10upx;
	padding-right: 10upx;
	&:after {
		border-radius: 8upx;
	}
}
.active{
	background: #FF5E00 !important;
}
.confirm-btn {
	width: 630upx;
	height: 76upx;
	line-height: 76upx;
	border-radius: 15upx;
	margin-top: 70upx;
	// background: #FF5E00;
	background:rgba(209,209,214,1);
	color: #fff;
	font-size: $font-lg;
	&:after {
		border-radius: 15upx;
	}
}
button[disabled] {
   background:rgba(209,209,214,1) !important;
   color: #fff !important;;
}
.forget-section {
	font-size: $font-sm + 2upx;
	color: $font-color-spec;
	text-align: center;
	margin-top: 40upx;
}
.register-section {
	position: fixed;
	left: 0;
	bottom: 50upx;
	width: 100%;
	font-size: 28upx;
	color:#8E8E93;
	text-align: center;
	text {
		color: #007AFF;
		margin-left: 10upx;
	}
}
</style>
